<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Cheese Factory</title>
	<link rel="stylesheet" href="framework.css" type="text/css">
	<link rel="stylesheet" href="user.css" type="text/css">
	<script type="text/javascript" src="framework.js"></script>
	<script type="text/javascript" src="user.js"></script>
	<script type="text/javascript" src="data.js"></script>

</head>
<body>

<!-- Idle -->
<div id="idle" class="idle">
	<div id="idlego">
	V0.99
	</div>
</div>
<!-- //idle -->

<!-- Title -->
<div class="title">
	Mobile Widget
</div>
<!-- //Title -->

<div class="setTitle">
	Setting List
</div>

<!-- Index -->
<div class="scene" id="index">
	<div class="list">
		<ul>
			<li id="goComponent">Component</li>
			<li id="goDataProcessing">Data Processing</li>
			<li id="goTransition">Transition</li>
			<li id="goTouchEvent">Touch Event</li>
		</ul>
	</div>
</div>
<!-- Index -->


<!-- Component -->
<div class="scene" id="sComponent">
	<div class="list">
		<ul>
			<li id="goTextList">Text List</li>
			<li id="goImageList">Image List</li>
			<li id="goIconList">Icon List</li>
			<li id="goAccordion">Accordion List</li>
			<li id="goTab">Tab</li>
			<li id="goPageControl">Page Control</li>
			<li id="goTextPage">Text Page</li>
			<li id="goPopup">Popup</li>
		</ul>
	</div>
</div>
<!-- Component -->



<!-- Text List -->
<div class="scene" id="sTextList">
	<div class="list">
		<div class="subTit">
			One Line
		</div>
		<ul>
			<li>One Line Text</li>
			<li>One Line Text</li>
		</ul>
		<div class="subTit">
			Multi Line
		</div>
		<ul>
			<li>
				<span class="txt">
					Multi Line Text
				</span>
				<span class="subTxt">
					Sub Some Text.
				</span>
			</li>
			<li>
				<span class="txt">
					Multi Line Text
				</span>
				<span class="subTxt">
					Sub Some Text. Sub Some Text. Sub Some Text. Sub Some Text. Sub Some Text.
				</span>
			</li>
		</ul>
	</div>
</div>
<!-- Text List -->


<!-- Image List -->
<div class="scene" id="sImageList">
	<div class="list">
		<div class="subTit">
			Image List
		</div>
		<ul>
			<li>
				<div class="img">
					<img src="img/samplethumnail_1.png">
				</div>
				<div class="txt">Image List</div>
			</li>
			<li>
				<div class="img">
					<img src="img/samplethumnail_2.png">
				</div>
				<div class="txt">Image List</div>
			</li>
		</ul>
		<div class="subTit">
			Image Multi Line
		</div>
		<ul>
			<li>
				<div class="img">
					<img src="img/samplethumnail_3.png">
				</div>
				<div class="txt">Image List Title</div>
				<div class="subTxt">Sub Some Text. Sub Some Text. Sub Some Text. Sub Some Text. </div>
			</li>
			<li>
				<div class="img">
					<img src="img/samplethumnail_4.png">
				</div>
				<div class="txt">Image List Title</div>
				<div class="subTxt">Sub Some Text. Sub Some Text. Sub Some Text. Sub Some Text. </div>
			</li>
		</ul>
		<div class="subTit">
			Image Multi Line Type2
		</div>
		<ul>
			<li>
				<div class="txt">Image List Title</div>
				<div class="img">
					<img src="img/samplethumnail_5.png">
				</div>
				<div class="subTxt">Sub Some Text. Sub Some Text. Sub Some Text. Sub Some Text. </div>
			</li>
			<li>
				<div class="txt">Image List Title</div>
				<div class="img">
					<img src="img/samplethumnail_3.png">
				</div>
				<div class="subTxt">Sub Some Text. Sub Some Text. Sub Some Text. Sub Some Text. </div>
			</li>
		</ul>
	</div>
</div>
<!-- Image List -->

<!-- Image List -->
<div class="scene" id="sIconList">
	<div class="list">
		<ul>
			<li>
				<div class="img ico1"></div>
				<div class="txt">Icon List</div>
				<div class="subTxt">Icon List</div>
			</li>
			<li>
				<div class="img ico2"></div>
				<div class="txt">Icon List</div>
				<div class="subTxt">Icon List</div>
			</li>
			<li>
				<div class="img ico3"></div>
				<div class="txt">Icon List</div>
				<div class="subTxt">Icon List</div>
			</li>
			<li>
				<div class="img ico4"></div>
				<div class="txt">Icon List</div>
				<div class="subTxt">Icon List</div>
			</li>
			<li>
				<div class="img ico1"></div>
				<div class="txt">Icon List</div>
				<div class="subTxt">Icon List</div>
			</li>
			<li>
				<div class="img ico2"></div>
				<div class="txt">Icon List</div>
				<div class="subTxt">Icon List</div>
			</li>
			<li>
				<div class="img ico3"></div>
				<div class="txt">Icon List</div>
				<div class="subTxt">Icon List</div>
			</li>
			<li>
				<div class="img ico4"></div>
				<div class="txt">Icon List</div>
				<div class="subTxt">Icon List</div>
			</li>
		</ul>
	</div>
</div>
<!-- Image List -->


<!-- Accordion List -->
<div class="scene" id="sAccordion">
	<div class="list">
		<ul>
			<li class="accordion">
				Accordion
				<div class="accCon">
					<div class="list">
						<ul>
							<li>Sub List</li>
							<li>Sub List</li>
							<li>Sub List</li>
						</ul>
					</div>
				</div>
			</li>
			<li class="accordion">
				Accordion
				<div class="accCon">
					<div class="list">
						<ul>
							<li>Sub List</li>
							<li>Sub List</li>
							<li>Sub List</li>
						</ul>
					</div>
				</div>
			</li>
		</ul>
	</div>
</div>
<!-- Accordion List -->

<!-- Tab -->
<div class="scene" id="sTab">
	<div class="tab">
		<ul>
			<li class="asd">Tab Menu1</li>
			<li class="asd">Tab Menu2</li>
			<li class="asd">Tab Menu3</li>
			<li class="asd">Tab Menu4</li>
			<li class="asd">Tab Menu5</li>
		</ul>
	</div>
	<div class="subScene">
			Contents1<button class="asdasd" style="font-size:20px;">asdasda</button>
	</div>
	<div class="subScene">
		Contents2
	</div>
	<div class="subScene">
		Contents3
	</div>
	<div class="subScene">
		Contents4
	</div>
	<div class="subScene">
		Contents5
	</div>
</div>
<!-- Tab -->

<!-- Page Control -->
<div class="scene" id="sPageControl">
	<div class="pageControl">
		<ul>
			<li>Page Control 1</li>
			<li>Page Control 2</li>
			<li>Page Control 3</li>
			<li>Page Control 4</li>
			<li>Page Control 5</li>
		</ul>
	</div>
	<div class="subScene">
		Contents
	</div>
	<div class="subScene">
		Contents
	</div>
	<div class="subScene">
		Contents
	</div>
	<div class="subScene">
		Contents
	</div>
	<div class="subScene">
		Contents
	</div>
</div>
<!-- Page Control -->

<!-- Text Page -->
<div class="scene" id="sTextPage">
	<div class="textPage">
		<div class="tit">
			Text Page Title
		</div>
		<div class="desc">
			description<br>
			description description description description description description description description description description description description description description description description description description description description description description description description
		</div>
	</div>
</div>
<!-- Image List -->


<!-- DataProcessing -->
<div class="scene" id="sDataProcessing">
	<div class="list">
		<ul>
			<li id="goRssData">RSS Data</li>
			<li id="goUserSetting">User Setting Data</li>
		</ul>
	</div>
</div>
<!-- DataProcessing -->



<!-- setting -->
<div class="scene" id="sUserSetting">
	<div class="setList" id="setting"></div>
</div>
<!-- setting -->

<!-- setting -->
<div class="scene" id="sRssData">
	<div class="list">
		<ul>
			<li id="goRssPageControl">Page Control</li>
			<li id="goRssTab">Tab</li>
			<li id="goRssList">List</li>
		</ul>
	</div>
</div>
<!-- setting -->

<!-- setting -->
<div class="scene" id="sRssPageControl">
	<div class="pageControl" id="rssPageControl">
	</div>
</div>
<!-- setting -->

<!-- setting -->
<div class="scene" id="sRssTab">
	<div class="tab" id="rssTab">
	</div>
</div>
<!-- setting -->

<!-- setting -->
<div class="scene" id="sRssList">
	<div class="list" id="rssList">
	</div>
</div>
<!-- setting -->





<!-- Transtion -->
<div class="scene" id="sTransition">
	<div class="list">
		<ul>
			<li id="goSlideVer">Slide Vertical</li>
			<li id="goSlideHor">Slide Horizontal</li>
			<li id="goFade">Fade</li>
			<li id="goPop">Pop</li>
			<li id="goSpin">Spin</li>
		</ul>
	</div>
</div>
<!-- //Transtion -->



<!-- Effect Area -->
<div class="scene" id="effectArea">
<div style="margin-top: 150px; text-align: center; font-size: 20px;">
Transtion Test<br>
	<button class="btn" id="btnEffBack">Back</button>
</div>
</div>
<!-- //Effect Area -->




<!-- Touch Event -->
<div class="scene" id="sTouchEvent">
	<div class="list">
		<ul>
			<li id="goTap">Tap</li>
			<li id="goFlick">Flick</li>
			<li id="goSwipe">Swipe</li>
			<li id="goDnd">Drag and Drop</li>
		</ul>
	</div>
</div>
<!-- //Touch Event -->



<!-- Touch Event : Tab -->
<div class="scene" id="sTap">
	<div class="cc bgTap">
		<div class="touchInfoBox1">
			<h1>Tap</h1>
			Touch the this box.
			<img src="img/touchimg1.png" class="touchImg">
		</div>

		<div class="touchInfoBox2">
			<div class="touchExBox exTap">
				Tap
			</div>

			<div class="touchExBox exLongTap">
				Long Tap
			</div>

			<div class="touchExBox exDoubleTap">
				Double Tap
			</div>
		</div>
	</div>
</div>
<!-- //Touch Event -->


<!-- Touch Event : Flick -->
<div class="scene" id="sFlick">
	<div class="cc bgTap">
		<div class="touchInfoBox1">
			<h1>Flick</h1>
			Come on!
			<img src="img/touchimg2.png" class="touchImg">
		</div>

		<div class="touchInfoBox2">
			<div class="flickExBox">
				Flick
			</div>
		</div>


	</div>
</div>
<!-- //Touch Event -->


<!-- Touch Event : Swipe -->
<div class="scene" id="sSwipe">
	<div class="cc bgTap">
		<div class="touchInfoBox1">
			<h1>Swipe</h1>
			Come on!
			<img src="img/touchimg3.png" class="touchImg">
		</div>

		<div class="touchInfoBox2">
			<div class="swipeWrap">
				<div class="swipeExBox">
				</div>
			</div>
		</div>


	</div>
</div>
<!-- //Touch Event -->


<!-- Touch Event : Drag n Drop -->
<div class="scene" id="sDnd">
	<div class="cc bgTap">
		<div class="touchInfoBox1">
			<h1 style="font-size: 45px">Drag and<br>Drop</h1>
			Come on!
			<img src="img/touchimg4.png" class="touchImg">
		</div>

		<div class="touchInfoBox2" style="height: 350px; position: relative;">
			<div class="dragBox" id="dragBox">
				Drag Me
			</div>

			<div class="dropBox" id="dropBox">
				Drop Here
			</div>

		</div>

	</div>
</div>

<!-- Trans Setting -->
<div class="scene" id="setTrans">
	<div class="setList" id ="setTransList">
	</div>
</div>
<!-- //Trans Setting -->

<!-- Theme Setting -->
<div class="scene" id="setTheme">
	<div class="setList" id ="setThemeList">
	</div>
</div>
<!-- //Theme Setting -->

</body>
</html>



